<template>
  <view>
    <view class="header">
      <!-- <view class="iconfont icon-user"></view> -->
      <image :src="userImg" mode="" v-if="userImg"></image>
      <image src="../../static/icon/user.png" mode="" v-else></image>
      <view class="usermsg">
        <text class="login" v-if="!token" @click="login">登录</text>
        <text class="username" v-else>昵称：{{userInfo.real_name}}</text>
      </view>
      <view class="iconfont icon-shezhi" v-if="token" @click="goSetUser"></view>
    </view>
    <view class="content">
      <view class="content-item" @click="goApply">
        <view class='iconfont icon-dingdan-'></view>
        <text class="content-itemTitle">申请接单</text>
        <view class="iconfont  icon-xiangyoujiantou"></view>
      </view>
      <view class="content-item" @click="goSuggest">
        <view class='iconfont icon-guanyu'></view>
        <text class="content-itemTitle">投诉建议</text>
        <view class="iconfont  icon-xiangyoujiantou"></view>
      </view>
      <view class="content-item" @click="goAbout">
        <view class='iconfont icon-kehutousu'></view>
        <text class="content-itemTitle">关于我们</text>
        <view class="iconfont  icon-xiangyoujiantou"></view>
      </view>
      <view class="content-item">
        <view class='iconfont icon-weixin'></view>
        <text class="content-itemTitle">微信客服</text>
        <view class="iconfont  icon-xiangyoujiantou"></view>
      </view>
      <text class="warn">如有问题请点击微信客服复制微信号添加客服好友</text>
    </view>
    <button v-if="token" class="exit" @click="exit">退出登录</button>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        token: '',
        userInfo: '',
        userImg: ''
      }
    },
    onShow() {
      this.uploadToken()
      this.uploadUserInfo()
      this.uploadUserImg()
    },
    methods: {
      uploadToken() {
        this.token = uni.getStorageSync('token')
        if (!this.token) {
          uni.showModal({
            title: '提示',
            content: '请先登录...',
            success: function(res) {
              if (res.confirm) {
                uni.navigateTo({
                  url: '/pages/login/login'
                })
              } else if (res.cancel) {
                uni.switchTab({
                  url: '/pages/index/index'
                })
              }
            }
          });
        }
      },
      uploadUserInfo() {
        this.userInfo = uni.getStorageSync('userInfo')
      },
      uploadUserImg() {
        this.userImg = uni.getStorageSync('userImg')
      },
      login() {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      },
      goApply() {
        uni.navigateTo({
          url: '/pages/apply/apply'
        })
      },
      goSetUser() {
        uni.navigateTo({
          url: '/pages/userInfo/userInfo'
        })
      },
      goAbout() {
        uni.navigateTo({
          url: '/pages/about/about'
        })
      },
      goSuggest() {
        uni.navigateTo({
          url: '/pages/suggest/suggest'
        })
      },
      exit() {
        uni.clearStorage().then(() => {
          console.log('已成功清除全部本地存储');
        }).catch((err) => {
          console.log('清除本地存储出现错误：', err);
        })
        this.token = ''
        this.uploadToken()
      },

      // 强制页面刷新
      // refreshPage() {
      //   const currentPage = getCurrentPages()[getCurrentPages().length - 1];
      //   uni.redirectTo({
      //     url: currentPage.route
      //   });
      // }
    }
  }
</script>

<style>
  page {
    background-color: #f2f2f2;
  }

  .header {
    width: 100%;
    height: 240rpx;
    background-color: #b2cfed;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header image {
    width: 136rpx;
    height: 136rpx;
    margin-left: 30rpx;
    border-radius: 50%;
  }

  .username {
    margin-right: 240rpx;
    color: #e6ecf4;
    font-weight: 550;
    font-size: 36rpx;
  }

  .login {
    margin-right: 480rpx;
    color: #e6ecf4;
  }

  .icon-shezhi {
    font-size: 48rpx;
    color: #e6ecf4;
    margin-right: 36rpx;
  }

  .content-item {
    width: 90%;
    height: 80rpx;
    margin: 20rpx auto;
    padding: 0 16rpx;
    background-color: #ffffff;
    border-radius: 8rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .content-itemTitle {
    margin-left: 16rpx;
  }

  .icon-xiangyoujiantou {
    margin-left: 460rpx;
  }

  .exit {
    width: 90%;
    border-radius: 100rpx;
    background: #e13938;
    color: #fff;
    margin-top: 100rpx;
  }

  .warn {
    font-size: 30rpx;
    margin-left: 2.5%;
    padding: 14rpx 16rpx;
    background-color: #b2cfed;
    border-radius: 8rpx;
  }
</style>